html, body, h1, h2, h3, h4, h5, h6, ul, ol, dd, dt, dl {
	margin: 0;
	padding: 0;
}
ul, li {
	list-style: none outside;
}
:active {
	outline: 0;
}
/* remove outline in firefox */
:focus {
	outline: 0;
}
::-moz-focus-inner {
	border: 0;
}
/* END: remove outline in firefox */
.middle {
	display: table-cell;
	vertical-align: middle;
}
.clearfix() {
    &:after {
        content: '';
        display: block;
        clear: both;
        height: 0;
    }
}

.no-select {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.radius-tl(@r: 5px) {		
	border-top-left-radius: @r;
}
.radius-tr(@r: 5px) {		
	border-top-right-radius: @r;
}
.radius-bl(@r: 5px) {		
    border-bottom-left-radius: @r;
}
.radius-br(@r: 5px) {		
	border-bottom-right-radius: @r;
}
.radius(@r: 5px) {
    .radius-tl(@r);
    .radius-tr(@r);
    .radius-bl(@r);
    .radius-br(@r);
}

.linear-gradient(@dir: "top", @start: white, @end: black) {
    background: linear-gradient(@dir , @start , @end 100%); 
    background: -moz-linear-gradient(@dir , @start , @end 100%);
    background: -webkit-linear-gradient(@dir , @start , @end 100%);
}
/* for syntaxhighlighter plugin */
.syntaxhighlighter {
	overflow: hidden;
	padding: 10px 0;
	border-radius: 5px;
}
.toolbar {
	display: none; /* don't show the ? in code area */
}
/* END */

html {
	height: 100%;
	body {
		height: 100%; 
		background-color: #f5f6f7;
		font-family: "GE Inspira Cond", "consolas";
	}
}

@border-color: #ccc;
@width: e("calc(98% - 320px)");

nav {
	position: fixed;
	top: 0;
	left: 10px;
	z-index: 999;
	margin-top: 5px;
	max-width: 320px;
	.no-select();	
	
	.pin {
	    position: absolute;
	    right: -32px;
	    top: 5px;
	    width: 32px;
	    height: 32px;
	    background:url("");
	    cursor: pointer;
	    
	    &.active {
	        background:url("");
	    }
	}
	
	span {
		display: block;
		padding: 5px;
		margin-top: 5px;
		margin-right: 5px;
		border: 1px solid #999;
		cursor: pointer;
		.radius(3px);
		.no-select();
		.linear-gradient(top, rgba(244, 244, 244, .8), rgba(192, 192, 192, .6));
		
		&:active {						
			.linear-gradient(top, rgba(192, 192, 192, .6), rgba(244, 244, 244, .8));
		}
	}
}
					
#wrapper {
	width: @width;
	margin: 0 20px 20px 300px;
	h1 {
		border-color: @border-color;
		background-color: #222;
		font-size: 24px;
		line-height: 60px;
		color: #eee;
		text-align: center;
		.radius();
	}
	section {
		margin-top: 20px;
		h2 {
			padding: 10px 15px;
			border: 1px solid @border-color; 
			border-top-left-radius: 3px;
			border-top-right-radius: 3px;
			background-color: #f5f5f5;
			font-size: 16px;
			.no-select();
		}
        ul {
            li {
                .clearfix(); 
                border: 1px solid @border-color;
                border-top-style: none;
                background-color: white;
                &.text {
                    padding: 5px 10px;                    
                    font-family: "微软雅黑";
                    font-size: 14px;
                    line-height: 2em;
                }
                &:hover {						
                    background-color: #f5f6f7;

                    * {
                        background-color: #f5f6f7!important;
                    }
                }
                .box {
                    font-family: "微软雅黑";
                    font-size: 14px; 
                    &:nth-of-type(1) {
                        float: left;
                        width: 48%;
                    }
                    &:nth-of-type(2) {
                        float: right;
                        width: 48%;	
                    }
                    &:only-child {
                        float: left;
                        width: 100%;
                    }
                }

                &:nth-last-of-type(1) {
                    border-bottom-left-radius: 3px;
                    border-bottom-right-radius: 3px;
                }

                &.active {
                    background-color: #FCF8E3;
                    * {
                        background-color: #FCF8E3!important;
                    }
                    &:hover {
                        * {
                            background-color: #FCF8E3!important;
                        }
                    }
                }
            }
        }
    }
}

